<template>
  <view class="container">
    <form @submit="submitForm">

      <view class="">
        <!-- 楼盘名称 -->
        <view class="form-item">
          <label>楼盘名称</label>
          <input type="text" name="buildingName" placeholder="请输入楼盘名称" v-model="dataTemp.buildingName" />
        </view>
        <view class="form-item">
          <label>楼盘均价</label>
          <input type="number" name="price" placeholder="请输入楼盘均价（元/㎡）" v-model="dataTemp.price" />
        </view>
        <!-- 在售面积 -->
        <view class="form-item">
          <label>在售面积</label>
          <input type="text" name="onSaleArea" placeholder="请输入在售面积区间（㎡），如：100-200" v-model="dataTemp.onSaleArea" />
        </view>

        <!-- 佣金金额 -->
        <!--        <view class="form-item">-->
        <!--          <label>佣金金额</label>-->
        <!--          <input type="number" name="commission" placeholder="请输入佣金金额（元）" />-->
        <!--        </view>-->

        <!-- 楼盘地址 -->
        <view class="form-item">
          <label>楼盘地址</label>
          <input type="text" name="address" placeholder="请输入楼盘地址"  v-model="address99" @click="addressTo"/>
        </view>
        <!-- 楼盘类型 -->
        <!-- <view class="form-item">
          <label>楼盘类型</label>
          <picker mode="selector" name="buildingType" :value="typeIndex" @change="bindTypeChange">
            <view class="picker-view">{{ typeOptions[typeIndex] }}</view>
          </picker>
        </view> -->
        <!-- 参考价格 -->

        <!-- 总共规划期数 -->
        <view class="form-item">
          <label>总规划期数</label>
          <input type="number" name="totalPeriods" placeholder="请输入总规划期数" v-model="dataTemp.totalPeriods" />
        </view>

        <!-- 在售楼盘期数 -->
        <view class="form-item" @click="showPeriodPicker">
          <label>在售楼盘期数</label>
          <view class="picker-view">{{ selectedPeriod || '请选择' }}</view>
        </view>

        <!-- 在售楼盘状态 -->
        <view class="form-item" @click="showStatusPicker">
          <label>在售楼盘状态</label>
          <view class="picker-view">{{ selectedStatus || '请选择' }}</view>
        </view>

        <!-- 在售楼栋 -->
        <view class="form-item">
          <label>在售楼栋</label>
          <input type="text" name="buildingNumber" placeholder="请输入在售楼栋" v-model="dataTemp.buildingNumber" />
        </view>

        <!-- 容积率 -->
        <view class="form-item">
          <label>容积率</label>
          <input type="number" name="plotRatio" placeholder="请输入容积率" v-model="dataTemp.plotRatio" />
        </view>

        <!-- 车位比 -->
        <view class="form-item">
          <label>车位比</label>
          <input type="text" name="parkingRatio" placeholder="请输入车位比，如：1:1" v-model="dataTemp.parkingRatio" />
        </view>

        <!-- 总户数 -->
        <view class="form-item">
          <label>总户数</label>
          <input type="number" name="totalHouses" placeholder="请输入总户数" v-model="dataTemp.totalHouses" />
        </view>

      </view>

      <!-- 人员绑定 -->
      <view class="form-item" @click="openBrokerPopup">
        <label>人员绑定</label>
        <view class="arrow-right">{{clerkName}}＞</view>
      </view>
      <!-- 动态添加户型 -->
      <view class="form-item" v-for="(layout, index) in layouts" :key="index">
        <view style="width: 100%;">
          <label>户型信息 - {{ index + 1 }}</label>
          <view class="form-item">
            <label>户型名称</label>
            <input type="text"  v-model="layout.name"  placeholder="请输入户型名称" />
          </view>
          <!-- 是否在售 -->
          <view class="form-item" @click="showIsOnSalePicker(index)">
            <label>是否在售</label>
            <view class="picker-view">{{ layout.isOnSaleText || '请选择' }}</view>
          </view>
          <!-- 是否主力户型 -->
          <view class="form-item" @click="showIsMainLayoutPicker(index)">
            <label>是否主力户型</label>
            <view class="picker-view">{{ layout.isMainLayoutText || '请选择' }}</view>
          </view>
          <view class="form-item">
            <label>单价</label>
            <input type="number" v-model="layout.unitPrice" placeholder="请输入单价（元/㎡）" />
          </view>
          <view class="form-item">
            <label>销售价</label>
            <input type="number" v-model="layout.salePrice" placeholder="请输入销售价（元）" />
          </view>

          <u-form-item label-position="left" label="户型图" label-width="150" required>
            <u-upload
                :custom-btn="true"
                ref="uUploadLayout"
                :auto-upload="true"
                :file-list="layout.images"
                :header="{ accessToken: storage.getAccessToken() }"
                :action="upload"
                :max-size="10 * 1024 * 1024"
                max-count="1"
                width="160"
                height="160"
                size-type="['compressed']"
            >
              <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                <u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
              </view>
            </u-upload>
          </u-form-item>


        </view>
      </view>
      <view class="form-item layout-control">
        <view class="add-layout" @click="addLayout">
          添加户型
        </view>
        <view class="remove-layout" @click="removeLayout(layouts.length - 1)">
          移除户型
        </view>
      </view>
      <!-- 交房时间 -->
      <view class="form-item">
        <label>交房时间</label>
        <picker mode="date" name="deliveryTime" :value="deliveryTimeValue" @change="bindDeliveryTimeChange">
          <view class="picker-view">{{ deliveryTimeValue }}</view>
        </picker>
      </view>
      <!-- 预售证号 -->
      <view class="form-item">
        <label>预售证号</label>
        <input type="text" name="presaleNumber" placeholder="请输入预售证号" v-model="dataTemp.presaleNumber" />
      </view>
      <!-- 周边配套 -->
      <!--      <view class="form-item">
        <label>周边配套</label>
        <textarea name="surroundings" placeholder="请输入周边配套信息，如学校、商场等"></textarea>
      </view>-->
      <!--      物业费-->
      <view class="form-item">
        <label>物业费</label>
        <input type="text" name="propertyFee" placeholder="请输入物业费（元/㎡）" v-model="dataTemp.propertyFee" />
      </view>
      <!-- 绿化率 -->
      <view class="form-item">
        <label>绿化率</label>
        <input type="text" name="greeningRate" placeholder="请输入绿化率（%）" v-model="dataTemp.greeningRate" />
      </view>
      <!-- 开发商 -->
      <view class="form-item">
        <label>开发商</label>
        <input type="text" name="developer" placeholder="请输入开发商名称" v-model="dataTemp.developer" />
      </view>
      <!-- 物业公司 -->
      <view class="form-item">
        <label>物业公司</label>
        <input type="text" name="propertyCompany" placeholder="请输入物业公司名称" v-model="dataTemp.propertyCompany" />
      </view>
      <!-- 楼盘详情介绍 -->
      <!--      <view class="form-item">
        <label>楼盘详情</label>
        <textarea name="detail" placeholder="请输入楼盘详细介绍"></textarea>
      </view>-->
      <!-- 楼盘图片上传 -->
      <u-form-item label-position="left" label="楼盘图片" label-width="150" required>
        <u-upload
            :custom-btn="true"
            ref="uUploadBuilding"
            :auto-upload="true"
            :file-list="images"
            :header="{ accessToken: storage.getAccessToken() }"
            :action="upload"
            :max-size="10 * 1024 * 1024"
            max-count="9"
            width="160"
            height="160"
            size-type="['compressed']"
        >
          <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
            <u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
          </view>
        </u-upload>
      </u-form-item>





      <!-- 基础标签 -->
      <view class="form-item">
        <label>基础标签</label>
        <u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
          <!-- 修改绑定 -->
          <u-checkbox v-model="checkboxList[index].checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
        </u-checkbox-group>
      </view>

      <!-- 楼盘亮点 -->
      <view class="form-item">
        <label>楼盘亮点</label>
        <u-checkbox-group @change="checkboxGroupChangeLiang" :width="radioCheckWidth" :wrap="radioCheckWrap">
          <!-- 修改绑定 -->
          <u-checkbox v-model="checkboxListLiang[index].checked" v-for="(item, index) in checkboxListLiang" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
        </u-checkbox-group>
      </view>

      <!-- 提交按钮  v-if="!id"-->
      <view class="form-item submit-button">
        <button formType="submit" class="submit-button2">提交</button>
      </view>
    </form>

    <!-- 人员选择框-->
    <u-popup closeable border-radius="28" @close="close" mode="bottom" height="80%" v-model="showBrokerPopup">
      <view class="search-wrapper">
        <input v-model="searchKeyword" placeholder="搜索经纪人" />
        <button @click="filterBrokers" style="background-color: #ccc">搜索</button>
      </view>
      <view class="broker-list">
        <view class="broker-item" v-for="(broker, index) in brokerList" :key="index">
          <view class="broker-info-wrapper">
            <view class="broker-name">{{ broker.clerkName }}</view>
            <view class="broker-phone">{{ broker.mobile }}</view>
          </view>
          <button class="select-btn" :style="{ backgroundColor: selectedBroker && selectedBroker.id === broker.id ? '#007aff' : '#ccc' }" @click="selectBrokerTemp(broker)">选择</button>
        </view>
      </view>
      <view class="confirm-btn-wrapper">
        <button class="confirm-btn" @click="confirmSelectBroker" :disabled="!selectedBroker">确认选择</button>
      </view>
    </u-popup>

    <uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />


  </view>
</template>

<script>
import {findBuildingList,saveBuilding,updateBuilding,getAllBuildings,findBuildingById} from "@/api/building"
import uniMap from "@/components/uniMap";
import { getClerkListAll } from '@/api/store';
import config from "@/config/config";
import storage from "@/utils/storage.js";
import {upload} from "@/api/common.js";

export default {
  components: {
    uniMap
  },
  data() {
    return {
      storage,
      upload: upload,
      mapFlag: false,
      typeOptions: ['住宅', '公寓', '别墅', '商业'],
      typeIndex: 0,
      layoutOptions: ['1室1厅', '2室1厅', '3室2厅', '4室2厅'],
      images: [],
      deliveryTimeValue: '',
      constructionImages: [],
      address99: '',
      layouts: [],
      periodOptions: ['一期', '二期', '三期', '四期', '五期'],
      selectedPeriod: null,
      statusOptions: ['已取证', '已开盘', '已交房'],
      selectedStatus: null,
      showBrokerPopup: false,
      currentHouse: null,
      brokerList: [
      ],
      checkboxList: [//基础标签
        { name: '央企盘盘', checked: false, disabled: false },
        { name: '准现房', checked: false, disabled: false },
        { name: '科技盘', checked: false, disabled: false },
        { name: '公园里', checked: false, disabled: false }
      ],
      checkboxListLiang: [//楼盘亮点
        { name: '首开优惠', checked: false, disabled: false },
        { name: '特价楼盘', checked: false, disabled: false },
        { name: '未来学区', checked: false, disabled: false },
        { name: '五年质保', checked: false, disabled: false }
      ],
      labelPosition: 'left',
      radioCheckWidth: 'auto',
      radioCheckWrap: false,
      selectedBroker: null,
      searchKeyword: '',
      yesNoOptions: ['是', '否'],
      longitude:'',
      latitude:'',
      clerkName: '',
      clerkMobile: '',
      selectedBrokerId:'',
      params: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
        mobile:''
      },
      dataTemp:{},
      id: false
    };
  },
  onLoad(options){
    this.getClerkListAll();
    if(options.id!=undefined && options.id!=null && options.id!=''){
      this.id = true;
      this.findBuildingById2(options.id)
    }
  },
  methods: {
    findBuildingById2(id){
      findBuildingById(id).then(res => {
        if(res.data.code==200){

          this.dataTemp=res.data.result;

          // 处理户型数据
          // 处理户型数据
          if (this.dataTemp.layouts  && this.dataTemp.layouts!='[]') {

            this.layouts = JSON.parse(this.dataTemp.layouts).map(layout => {
              try {

                // 尝试解析图片数据
               // const images = layout.images ? JSON.parse(layout.images) : [];
                const images = layout.images ? JSON.parse(layout.images).map(url => ({ url: url })) : [];

                // 确保 isOnSale 和 isMainLayout 为布尔值
                const isOnSale = typeof layout.isOnSale === 'boolean' ? layout.isOnSale : false;
                const isMainLayout = typeof layout.isMainLayout === 'boolean' ? layout.isMainLayout : false;
                return {
                  ...layout,
                  images: images,
                  isOnSaleText: isOnSale ? '是' : '否',
                  isMainLayoutText: isMainLayout ? '是' : '否'
                };
              } catch (error) {
                console.error('解析户型图片数据时出错:', error);
                return {
                  ...layout,
                  images: [],
                  isOnSaleText: '否',
                  isMainLayoutText: '否'
                };
              }
            });
          } else {
            this.layouts = [];
          }

          // 安全解析楼盘图片（关键修复）
          this.images = [];
          if (this.dataTemp.images) {
            try {
              // 假设接口返回的 images 是 JSON 字符串，解析为数组
              const imageUrls = typeof this.dataTemp.images === 'string'
                  ? JSON.parse(this.dataTemp.images)
                  : this.dataTemp.images;

              this.images = imageUrls.map(url => ({
                url,
                progress: 100, // 标记为已上传状态
                response: { result: url } // 模拟上传成功的响应结构
              }));
            } catch (error) {
              console.error('解析楼盘图片失败:', error);
              this.images = [];
            }
          }



          // 处理交房时间
          if (this.dataTemp.deliveryTime) {
            this.deliveryTimeValue = this.dataTemp.deliveryTime;
          }
        //  console.info("地址=="+this.dataTemp.address)
          // 处理地址
          if (this.dataTemp.address) {
            this.address99 = this.dataTemp.address;
          }

          // 处理在售楼盘期数
          if (this.dataTemp.selectedPeriod) {
            this.selectedPeriod = this.dataTemp.selectedPeriod;
          }
          // 处理在售楼盘状态
          if (this.dataTemp.selectedStatus) {
            this.selectedStatus = this.dataTemp.selectedStatus;
          }
          // 处理经纬度
          if (this.dataTemp.latitude) {
            this.latitude = this.dataTemp.latitude;
          }
          if (this.dataTemp.longitude) {
            this.longitude = this.dataTemp.longitude;
          }
          // 处理人员绑定
          if (this.dataTemp.selectedBrokerId) {
            this.selectedBrokerId = this.dataTemp.selectedBrokerId;
            this.clerkName = this.dataTemp.clerkName;
            this.clerkMobile = this.dataTemp.clerkMobile;
          }
          // 处理基础标签
          if (this.dataTemp.checkboxList) {
            const checkboxListData = JSON.parse(this.dataTemp.checkboxList);
            this.checkboxList.forEach((item, index) => {
              item.checked = checkboxListData[index].checked;
            });
          }
          // 处理楼盘亮点
          if (this.dataTemp.checkboxListLiang) {
            const checkboxListLiangData = JSON.parse(this.dataTemp.checkboxListLiang);
            this.checkboxListLiang.forEach((item, index) => {
              item.checked = checkboxListLiangData[index].checked;
            });
          }
        }
      })
    },
    addressTo(){
      this.mapFlag = true;
    },
    // 关闭地图
    closeMap() {
      this.mapFlag = false;
    },
    // 打开地图并访问权限
    clickUniMap() {
      // #ifdef APP-PLUS
      if (plus.os.name == "iOS") {
        // ios系统
        permision.judgeIosPermission("location")
            ? (this.mapFlag = true)
            : this.refuseMap();
      } else {
        // 安卓
        this.requestAndroidPermission(
            "android.permission.ACCESS_FINE_LOCATION"
        );
      }
      // #endif

      // #ifndef APP-PLUS
      // this.mapFlag = true;
      // #endif
      console.info("打开地图")
      this.mapFlag = true;
    },

    // 如果拒绝权限 提示区设置
    refuseMap() {
      uni.showModal({
        title: "温馨提示",
        content: "您已拒绝定位,请开启",
        confirmText: "去设置",
        success(res) {
          if (res.confirm) {
            //打开授权设置
            // #ifndef MP-WEIXIN
            uni.getSystemInfo({
              success(res) {
                if (res.platform == "ios") {
                  //IOS
                  plus.runtime.openURL("app-settings://");
                } else if (res.platform == "android") {
                  //安卓
                  let main = plus.android.runtimeMainActivity();
                  let Intent = plus.android.importClass(
                      "android.content.Intent"
                  );
                  let mIntent = new Intent("android.settings.ACTION_SETTINGS");
                  main.startActivity(mIntent);
                }
              },
            });
            // #endif
          }
        },
      });
    },

    // 获取安卓是否拥有地址权限
    async requestAndroidPermission(permisionID) {
      var result = await permision.requestAndroidPermission(permisionID);

      if (result == 1) {
        this.mapFlag = true;
      } else {
        this.refuseMap();
      }
    },

    // 选择地址后数据的回调
    callBackAddress(val) {
      console.log(val)
      uni.showLoading({
        title: "加载中",
      });

      if (val.regeocode && val) {
        this.address99 = val.regeocode.formatted_address;
        //获取经纬度
        this.latitude = val.latitude;
        this.longitude = val.longitude;
        uni.hideLoading();
      }

      this.mapFlag = !this.mapFlag; //关闭地图
    },
    getClerkListAll(){

      getClerkListAll(this.params).then(res => {

        if(res.data.code){
          this.brokerList=res.data.result
        }

      })
    },
    findBuildingList(){
      findBuildingList(this.queryParams).then(res => {
        if (res.data.success) {
          if(res.data.result.records.length>0){
            this.list = this.list.concat(res.data.result.records);
          }
        }
      })
    },
    bindTypeChange(e) {
      this.typeIndex = e.detail.value;
    },
    chooseImage() {
      uni.chooseImage({
        count: 9 - this.images.length,
        success: (res) => {
          this.images = this.images.concat(res.tempFilePaths);
        }
      });
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
    bindDeliveryTimeChange(e) {
      this.deliveryTimeValue = e.detail.value;
    },
    chooseConstructionImage() {
      uni.chooseImage({
        count: 9 - this.constructionImages.length,
        success: (res) => {
          this.constructionImages = this.constructionImages.concat(res.tempFilePaths);
        }
      });
    },
    removeConstructionImage(index) {
      this.constructionImages.splice(index, 1);
    },
    addLayout() {
      this.layouts.push({ images: [], isOnSale: false, isMainLayout: false, isOnSaleText: null, isMainLayoutText: null,name:null});
    },
    chooseLayoutImage(index) {
      uni.chooseImage({
        count: 9 - this.layouts[index].images.length,
        success: (res) => {
          this.layouts[index].images = this.layouts[index].images.concat(res.tempFilePaths);
        }
      });
    },
    removeLayoutImage(layoutIndex, imgIndex) {
      this.layouts[layoutIndex].images.splice(imgIndex, 1);
    },
    removeLayout(index) {
      if (this.layouts.length > 0) {
        this.layouts.splice(index, 1);
      }
    },
    // checkbox选择发生变化
    checkboxGroupChange(e) {
      let featureList = e.map(val => {
        return {
          feature: val
        };
      });
      //this.model.featureList = featureList;
    },
    submitForm(e) {

      const formData = e.detail.value;


      // 处理楼盘图片


      // 获取所有图片（包括旧图片和新上传的图片）
      const buildingUploader = this.$refs.uUploadBuilding;
      const allBuildingImages = [
        // 已加载的图片（包括初始化时从数据库获取的）
        ...this.images.filter(img => img.progress === 100).map(img => img.url),
        // 新上传成功的图片
        ...buildingUploader.lists.filter(file =>
            file.progress === 100 && file.response?.result
        ).map(file => file.response.result)
      ];


      if (allBuildingImages.length === 0) {
        uni.showToast({ title: "请至少选择一张楼盘图片", icon: "none" });
        return;
      }
      formData.images = JSON.stringify(allBuildingImages);



      // 处理户型图
      this.layouts.forEach((layout, index) => {
        const layoutUploader = this.$refs.uUploadLayout[index];
        if (layoutUploader) {

          const files = layoutUploader.lists.filter(val => {
            return val.progress == 100;
          });
          if (this.$u.test.isEmpty(files)) {
            uni.showToast({
              title: `请为户型 ${index + 1} 至少选择一张图片`,
              icon: "none",
            });
            return;
          }

          layout.images = files.map(val => val.url);
        }
      });

      //  formData.constructionImages = JSON.stringify(this.constructionImages);
      formData.layouts = JSON.stringify(this.layouts.map(layout => {
        const newLayout = { ...layout };
        newLayout.images = JSON.stringify(newLayout.images);
        return newLayout;
      }));

      formData.deliveryTime = this.deliveryTimeValue;
      formData.address = this.address99; // 将地址添加到表单数据中
      formData.selectedPeriod = this.selectedPeriod; // 添加选中的在售楼盘期数
      formData.selectedStatus = this.selectedStatus; // 添加选中的在售楼盘状态
      formData.latitude=this.latitude;//维度
      formData.longitude=this.longitude;//经度
      formData.selectedBrokerId=this.selectedBrokerId;
      formData.clerkMobile=this.clerkMobile;
      formData.clerkName=this.clerkName;
      //this.checkboxList  转换成json字符串
      formData.checkboxList = JSON.stringify(this.checkboxList);

      formData.checkboxListLiang=JSON.stringify(this.checkboxListLiang);
      // 这里可以添加将数据发送到服务器的逻辑，例如使用uni.request
      // 收集layouts数据
      console.log('提交的数据：', formData);

      if(this.id){//更新

        formData.id=this.dataTemp.id;

        updateBuilding(formData).then(res => {
          if (res.statusCode==200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000
            });

            setTimeout(() => {
              //返回上一级页面
              uni.navigateTo({
                url: `/pages/manage/buildManage`,
              });
            }, 500);

          } else {
            uni.showToast({
              title: '提交失败',
              icon: 'success',
              duration: 2000
            });
          }
        })
      }else{
        saveBuilding(formData).then(res => {
          if (res.statusCode==200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000
            });

            setTimeout(() => {
              //返回上一级页面
              uni.navigateTo({
                url: `/pages/manage/buildManage`,
              });
            }, 500);

          } else {
            uni.showToast({
              title: '提交失败',
              icon: 'success',
              duration: 2000
            });
          }
        })
      }

    },
    bindPerson() {
      // 这里可以添加人员绑定的逻辑，比如弹出选择人员的弹窗等
      console.log('点击了人员绑定');
    },
    showPeriodPicker() {
      uni.showActionSheet({
        itemList: this.periodOptions,
        success: (res) => {
          this.selectedPeriod = this.periodOptions[res.tapIndex];
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    showStatusPicker() {
      uni.showActionSheet({
        itemList: this.statusOptions,
        success: (res) => {
          this.selectedStatus = this.statusOptions[res.tapIndex];
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    openBrokerPopup(house) {
      //  this.currentHouse = house;
      this.showBrokerPopup = true;
      this.selectedBroker = null;
      this.searchKeyword = '';
    },
    selectBrokerTemp(broker) {
      this.selectedBroker = broker;
    },
    confirmSelectBroker() {

      if (this.selectedBroker) {
        this.showBrokerPopup = false;
        this.clerkName=this.selectedBroker.clerkName;
        this.clerkMobile=this.selectedBroker.clerkMobile;
        this.selectedBrokerId=this.selectedBroker.memberId;
        // 这里可以添加选择经纪人后的逻辑，比如将经纪人信息关联到房源
        //  console.log(`为房源 ${this.currentHouse.id} 选择了经纪人 ${this.selectedBroker.name}，手机号：${this.selectedBroker.phone}`);
      }
    },
    showIsOnSalePicker(index) {
      uni.showActionSheet({
        itemList: this.yesNoOptions,
        success: (res) => {
          this.layouts[index].isOnSale = this.yesNoOptions[res.tapIndex] === '是';
          this.layouts[index].isOnSaleText = this.yesNoOptions[res.tapIndex];
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    showIsMainLayoutPicker(index) {
      uni.showActionSheet({
        itemList: this.yesNoOptions,
        success: (res) => {
          this.layouts[index].isMainLayout = this.yesNoOptions[res.tapIndex] === '是';
          this.layouts[index].isMainLayoutText = this.yesNoOptions[res.tapIndex];
        },
        fail: (err) => {
          console.log(err);
        }
      });
    }
  }
};
</script>


<style>
/* 整体容器 */
.container {
  padding: 15px;
  background-color: #e5f6ff; /* 浅蓝色背景 */
}
/* 表单元素容器 */
.form-item {
  display: flex;
  flex-wrap: wrap; /* 允许内容换行 */
  align-items: center;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
  box-sizing: border-box;
}
/* 表单标签 */
.form-item label {
  font-weight: 500;
  margin-right: 10px;
  font-size: 14px;
  white-space: nowrap;
  min-width: 80px; /* 设置标签最小宽度 */
}


.form-item2 {
  display: flex;
  flex-wrap: wrap; /* 允许内容换行 */
  align-items: center;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
  box-sizing: border-box;
}
/* 表单标签 */
.form-item2 label {
  font-weight: 500;
  margin-right: 10px;
  font-size: 14px;
  white-space: nowrap;
  min-width: 80px; /* 设置标签最小宽度 */
}



/* 输入框 */
input,
textarea {
  flex: 1;
  min-width: 180px; /* 增加输入框最小宽度 */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;

}
textarea {
  min-height: 60px;
}
/* 选择器视图 */
.picker-view {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
  min-width: 150px; /* 增加选择器最小宽度 */
  box-sizing: border-box;
}
/* 户型选择checkbox */
.checkbox-group {
  flex: 1;
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
}
.checkbox-group label {
  margin-right: 10px;
  margin-bottom: 0; /* 去除底部边距 */
  display: inline-block;
  font-size: 14px;
}
/* 自定义 checkbox 样式 */
checkbox {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
checkbox::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
}
checkbox[checked]::before {
  background-color: #007aff;
  border-color: #007aff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
  background-size: cover;
}
/* 图片上传区域 */
.image-uploader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.uploaded-image {
  width: 60px;
  height: 60px;
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
}
.uploaded-image image {
  width: 100%;
  height: 100%;
}
.uploaded-image icon {
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 2px;
}
.upload-button {
  min-width: 80px;
  height: 60px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #999;
  margin-left: auto;
}
/* 提交按钮容器 */
.submit-button {
  justify-content: center;
}
/* 提交按钮 */
.submit-button2 {
  width: 95%;
  padding: 10px;
  background-color: #ff6200;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.submit-button2:hover {
  background-color: #ff8133;
}
/* 添加户型和移除户型控制区域 */
.layout-control {
  display: flex;
  justify-content: space-between;
}
/* 添加户型样式 */
.add-layout {
  cursor: pointer;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
  color: #007aff;
  transition: background-color 0.3s ease;
}
.add-layout:hover {
  background-color: #e0f0ff;
}
/* 移除户型样式 */
.remove-layout {
  cursor: pointer;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
  color: #ff3b30;
  transition: background-color 0.3s ease;
}
.remove-layout:hover {
  background-color: #ffe0e0;
}
/* 人员绑定箭头样式 */
.arrow-right {
  margin-left: auto;
  color: #999;
  font-size: 18px;
}

/**
人员弹出框
 */
.broker-list {
  padding: 20rpx;
  overflow-y: auto;
}
.broker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;
}
.broker-info-wrapper {
  display: flex;
  flex: 1;
}
.broker-name {
  flex: 1;
}
.broker-phone {
  flex: 1;
  margin-left: 10rpx;
}
.select-btn {
  padding: 5rpx 10rpx;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 20rpx;
  min-width: 40rpx;
}
.confirm-btn-wrapper {
  padding: 20rpx;
  text-align: center;
}
.confirm-btn {
  padding: 10rpx 20rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
}
.confirm-btn:disabled {
  background-color: #ccc;
}
.search-wrapper {
  padding: 20rpx;
  display: flex;
  align-items: center;
}
.search-wrapper input {
  flex: 1;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  margin-right: 10rpx;
}
.search-wrapper button {
  padding: 10rpx 15rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
}

.slot-btn {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.custom-gap {
  width: 1000rpx;
  height: 10rpx;
  margin: 0 -200rpx 0 -200rpx;
  background-color: rgb(235, 236, 238);
}
</style>